/**
 * @description  产品管理新增修改组件
 */
import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import { InputNumberC, InputC, ProductListC, SingleDateC, SelectC } from '../../../comps';
import moment from 'moment';
import { connect } from 'dva';
import style from './index.less';
const FormItemLayout = {
  labelCol: {
    lg: { span: 7, offset: 0 },
    xl: { span: 7, offset: 0 },
    xxl: { span: 7, offset: 0 },
  },
  wrapperCol: {
    lg: { span: 15, offset: 0 },
    xl: { span: 15, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
@Form.create()
class myModal extends PureComponent {
  constructor() {
    super();
    this.state = {
      otherArgs: {}, //存储productName ProductCode
    };
  }
  componentDidMount() {
    this.props.onRef(this);
    if (this.props.isEdit && this.props.defaultData) {
      this.setState({
        otherArgs: {
          productName: this.props.defaultData.productName,
          productCode: this.props.defaultData.productCode,
        },
      });
    }
  }
  //查询产品的相关信息
  queryProductInfo = (id) => {
    this.props.dispatch({
      type: 'ProductManageM/queryProductInfo',
      payload: {
        id,
        type: 'view',
      },
      callback: (data) => {
        if (data && data[0]) {
          let temp = data[0].baseInfo || {};
          this.setState({
            otherArgs: {
              productName: temp.name,
              productCode: temp.code,
            },
          });

          this.props.form.setFieldsValue({
            productType: temp.type,
            startDate: temp.startDate ? moment(temp.startDate) : undefined,
            endDate: temp.endDate ? moment(temp.endDate) : undefined,
          });
        } else {
          this.setState({
            otherArgs: {},
          });
        }
      },
    });
  };
  // 渲染查询表单
  formRender = () => {
    const {
      isEdit,
      defaultData = {},
      globalM: {
        dataDictionary: { MAAT_PRODUCT_TYPE = [] },
      },
    } = this.props;
    return (
      <div>
        <Form>
          <Row>
            <Col span={8}>
              <ProductListC
                form={this.props.form}
                dataIndex='maatProductId'
                initialValue={isEdit ? defaultData.maatProductId : undefined}
                rules={[{ required: true, message: '请选择产品!' }]}
                dataType={isEdit ? 2 : 3}
                disabled={isEdit ? true : false}
                onChange={(e) => {
                  if (e) this.queryProductInfo(e.key);
                }}
              />
            </Col>
            <Col span={8}>
              <InputNumberC
                title='募集金额'
                dataIndex='raisedMoney'
                placeholder='请输入'
                precision={2}
                initialValue={isEdit ? defaultData.raisedMoney : undefined}
                form={this.props.form}
                formItemLayout={FormItemLayout}
                rules={[{ required: true, message: `请输入募集金额` }]}
                unit='元'
              />
            </Col>

            <Col span={8}>
              <InputNumberC
                title='预期收益率'
                dataIndex='expectedRate'
                initialValue={isEdit ? parseFloat(defaultData.expectedRate * 100) : undefined}
                placeholder='请输入'
                form={this.props.form}
                min={0}
                max={999}
                step={0.0001}
                precision={4}
                rules={[{ required: true, message: `请输入预期收益率` }]}
                formItemLayout={FormItemLayout}
                unit='%'
              />
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <SelectC
                title='产品类型'
                dataIndex='productType'
                placeholder='请选择'
                initialValue={isEdit ? defaultData.productType : undefined}
                form={this.props.form}
                formItemLayout={FormItemLayout}
                rules={[{ required: true, message: `请选择产品类型` }]}
                disabled={true}
                dataSource={MAAT_PRODUCT_TYPE.map((item) => {
                  return { value: item.code, title: item.value };
                })}
              />
            </Col>
            <Col span={8}>
              <SingleDateC
                form={this.props.form}
                formItemLayout={FormItemLayout}
                title='起息日期'
                dataIndex='startDate'
                laceholder='请选择起息日期'
                initialValue={isEdit ? (defaultData.startDate ? moment(defaultData.startDate) : undefined) : undefined}
                disabled={true}
                rules={[{ required: true, message: `请选择起息日期` }]}
              />
            </Col>
            <Col span={8}>
              <SingleDateC
                form={this.props.form}
                formItemLayout={FormItemLayout}
                title='到期日期'
                dataIndex='endDate'
                laceholder='请选择到期日期'
                initialValue={isEdit ? (defaultData.endDate ? moment(defaultData.endDate) : undefined) : undefined}
                disabled={true}
              />
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <InputNumberC
                title='业绩报酬'
                dataIndex='reward'
                placeholder='请输入'
                initialValue={isEdit ? parseFloat(defaultData.reward * 100) : 0}
                unit='%'
                min={0}
                max={100}
                step={0.0001}
                precision={4}
                form={this.props.form}
                formItemLayout={FormItemLayout}
                disabled={false}
              />
            </Col>
            <Col span={8}>
              <InputNumberC
                title='费率'
                dataIndex='costRate'
                placeholder='请输入'
                min={0}
                max={100}
                step={0.0001}
                precision={4}
                form={this.props.form}
                initialValue={isEdit ? parseFloat(defaultData.costRate * 100) : 0}
                formItemLayout={FormItemLayout}
                unit='%'
                disabled={false}
              />
            </Col>
          </Row>
        </Form>
      </div>
    );
  };

  // 获取表单数据，进行提交
  getData = (e) => {
    const { otherArgs } = this.state;
    const {
      form: { validateFields },
      rowId,
    } = this.props;
    let query = undefined;
    validateFields((err, fieldsValue) => {
      if (!err) {
        query = fieldsValue;
        query.startDate = query.startDate ? query.startDate.format('YYYY-MM-DD') : undefined;
        query.endDate = query.endDate ? query.endDate.format('YYYY-MM-DD') : undefined;
        query.expectedRate = parseFloat((query.expectedRate || 0) / 100).toFixed(6) * 1;
        query.reward = parseFloat((query.reward || 0) / 100).toFixed(6) * 1;
        query.costRate = parseFloat((query.costRate || 0) / 100).toFixed(6) * 1;
        query = { ...query, ...otherArgs };
      }
    });
    return query;
  };
  render() {
    return <div>{this.formRender()}</div>;
  }
}

export default connect(({ ProductManageM, globalM }) => ({
  ProductManageM,
  globalM,
}))(myModal);
